{% extends 'base.html.twig' %}

{% block title %}Genus {{ genus.name }}{% endblock %}

{% block body %}
    {#<a href="/genus/{{ name }}/notes">Json Notes</a>#}
    <a href="{{ path('genus_show_notes',{'name':genus.name}) }}">Json Notes</a>
    <h2 class="genus-name">{{ genus.name }}</h2>
    <div class="sea-creature-container">
        <div class="genus-photo"></div>
        <div class="genus-details">
            <dl class="genus-details-list">
                <dt>Subfamily:</dt>
                <dd>{{ genus.subFaminy }}</dd>
                <dt>Known Species:</dt>
                <dd>{{ genus.speciesCount }}</dd>
                <dt>Fun Fact:</dt>
                <dd>{{ genus.funFact|markdownify }}</dd>
                <dt>Recent Notes</dt>
                <dd>{{ recentNoteCount }}</dd>
                <dt>Lead Scientists</dt>
                <dd>
                    <ul class="list-group">
                       {% for genusScientist in genus.genusScientist %}
                            <li class="list-group-item js-scientist-item">
                                <a href="{{  path('user_show', {
                                    id: genusScientist.id
                                }) }}">{{ genusScientist.fullName }}</a>

                                <a href="#" class="btn btn-link btn-xs pull-right js-remove-scientist-user"
                                   data-url=""{{ path("genus_scientist_remove", {
                                    genusId: genus.id,
                                    userId: genusScientist.id
                                }) }}
                                >
                                    <span class="fa fa-close"></span>
                                </a>
                            </li>
                       {% endfor %}
                    </ul>
                </dd>
            </dl>
        </div>
    </div>
    <div class="notes-container">
        <h2 class="notes-header">Notes</h2>
        <div><i class="fa fa-plus plus-btn"></i></div>
    </div>
    <section id="cd-timeline">
        {% for note in notes %}
            <div class="cd-timeline-block">
                <div class="cd-timeline-img">
        			<img src="{{ asset('images/leanna.jpeg') }}" class="img-circle" alt="Leanna!">
        		</div>
                <div class="cd-timeline-content">
        			<h2><a href="#">AquaPelham</a></h2>
        			<p>{{ note }}</p>
        			<span class="cd-date">Dec. 10, 2015</span>
        		</div>
            </div>
        {% endfor %}
    </section>
    <div id="js-notes-wrapper"></div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloadflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloadflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <script src="https://cdnjs.cloadflare.com/ajax/libs/babel-core/5.0.23/browser.min.js"></script>
    <script type="text/javascript" src="{{ asset('js/notes.react.js') }}"></script>
    <script type="text/babel">
        ReactDom.render(
            <NoteSection />
                document.getElementById("js-notes-wrapper")

        );
    </script>
    <script>
       jquery(document).ready(function () {
            $('.js-remove-scientist-user').on('click', function (e) {
                e.preventDefault();

                var $el = $(this).closest('.js-scientist-item');
                $(this).find('.fa-close')
                .removeClass('fa-close')
                .addClass('fa-spinner')
                .addClass('fa-spin')

                $.ajax({
                    url:$(this).data('url'),
                    method: 'DELETE',
                }).done(function () {
                    $el.fadeOut();
                })
            });
       })
    </script>
{% endblock %}
